<template>
  <div id="login">
    <el-dialog
      width="30%"
      :visible.sync="isLoginDialogVisible"
      @close="closeLoginDialog">
      <img src="~assets/img/login_phone.png" alt="">
      <div class="login-form">
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginFormRules">
          <el-form-item prop="phone">
            <el-input
              v-model="loginForm.phone"
              placeholder="请输入手机号"
              prefix-icon="el-icon-mobile-phone"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              placeholder="请输入密码"
              type="password"
              prefix-icon="el-icon-unlock"></el-input>
          </el-form-item>
          <div
            class="login-button"
            @click="confirmLogin">登 录</div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { checkMobile } from 'utils/index.js'
import types from 'utils/types.js'

export default {
  name: 'Login',
  computed: {
    isLogin () {
      return this.$store.state.isLogin
    }
  },
  watch: {
    isLogin () {
      if (this.isLogin) {
        // 获取歌单
        this.getUserPlaylists()
        // 获取收藏数量
        this.getUserSubcount()
      }
    }
  },
  data () {
    return {
      isLoginDialogVisible: false,
      loginForm: {
        phone: '',
        password: ''
      },
      loginFormRules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, message: '请输入合法的手机号', trigger: 'blur' }
        ],
        password: [
          { required: true, messgae: '请输入密码', trigger: 'bluur' },
          { min: 4, max: 16, message: '请输入4到16位密码', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    // 检测登录状态
    this.getLoginStatus()
  },
  methods: {
    // 1. 打开loginDialog
    openLoginDialog () {
      this.isLoginDialogVisible = true
    },
    // 2. 登录
    confirmLogin () {
      this.$refs.loginFormRef.validate(async value => {
        // 验证
        if (!value) return this.$message.error('请输入正确的信息')
        const result = await this.$http.post('/login/cellphone', {
          phone: this.loginForm.phone,
          md5_password: this.$md5(this.loginForm.password)
        })
        console.log(result)
        // 验证登录是否成功
        if (result.status !== 200) return this.$message.error(result.data.message)
        if (result.data.code !== 200) return this.$message.error(result.data.message)
        // 登录成功
        this.$store.commit('userLogin', result.data)
        this.isLoginDialogVisible = false
        window.sessionStorage.setItem('cookie', result.data.cookie)
      })
    },
    // 3. 关闭登录dialog
    closeLoginDialog () {
      this.$refs.loginFormRef.resetFields()
    },
    // 4. 获取用户歌单
    async getUserPlaylists () {
      const result = await this.$http.get('/user/playlist', {
        params: {
          uid: this.$store.state.userInfo.profile.userId
        }
      })
      if (result.status !== 200 || result.data.code !== 200) return this.$message.info('获取用户歌单歌单')
      // 获取成功添加到状态管理
      this.$store.commit(types.ADD_USER_PLAYLISTS, result.data.playlist)
      // console.log(result)
    },
    // 5. 检测登录状态
    async getLoginStatus () {
      // 检测是否是登录状态
      if (!window.sessionStorage.getItem('cookie')) return false
      const result = await this.$http.get('login/status')
      if (result.status !== 200 || result.data.code !== 200) return this.$message.info('获取用户登录信息失败')
      console.log(result)
      // 获取成功
      this.$store.commit(types.USER_LOGIN, result.data)
    },
    // 6. 获取用户信息 , 歌单，收藏，mv, dj 数量
    async getUserSubcount () {
      const result = await this.$http.get('/user/subcount')
      if (result.status !== 200 || result.data.code !== 200) return this.$message.info('获取用户信息失败')
      // 获取成功
      // console.log(result.data)
      this.$store.commit(types.ADD_USER_SUBCOUNT, result.data)
    }
  }
}
</script>

<style scoped lang="less">
#login {
  .el-dialog {
    img {
      padding: 10px 0 30px 0;
      width: 100%;
    }
    .el-form {
      padding: 0 30px 30px 30px;
    }
    .login-button {
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      color: #fff;
      width: 100%;
      height: 40px;
      background-color: var(--base--color);
      border-radius: 5px;
      margin-top: 30px;
      cursor: pointer;
      &:hover {
        background-color: #c72e2e;
      }
    }
  }
}
</style>

<style lang="less">
#login {
  .el-dialog {
    width: 340px!important;
    background-color: #fafafa;
    .el-dialog__title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .el-dialog__body {
      padding: 0;
    }
    .el-form {
      .el-form-item {
        margin-bottom: 0;
        position: relative;
        transform: translateY(-2px);
        &:nth-of-type(1) {
          transform: translateY(0);
          .el-input__inner {
            border-radius: 5px 5px 0 0;
          }
          .el-form-item__error {
            top: -19px;
          }
        }
        .el-input__inner {
          border: 1px solid #d8d8d8;
          border-radius: 0 0 5px 5px;
        }
      }
    }
  }
}
</style>
